import { useEffect, useRef } from "react";
import * as echarts from "echarts";

interface PieChartProps {
  [key: string] : string | number
}

const PieChart = ({
  width = "100%",
  height = "100%",
  totalCount = 0,
  excellentCount = 0,
  goodCount = 0,
  passCount = 0,
  failCount = 0,
  waitCount = 0,
}: PieChartProps) => {
  const chartRef = useRef(null);

  const data: any[] = [
    { value: excellentCount, name: "优秀" },
    { value: goodCount, name: "良好" },
    { value: passCount, name: "及格" },
    { value: failCount, name: "不合格" },
    { value: waitCount, name: "未识别" },
  ];

  useEffect(() => {
    const chart = echarts.init(chartRef.current);

    const option = {
      legend: {
        type: "plain",
        orient: "vertical",
        left: "42%",
        top: "middle",
        width: "55%",
        formatter: function (name: any) {
          // 查找对应数据项
          const item = data.find((item) => item.name === name);
          if (!item) return name;

          // 计算总数值
          const total = data.reduce((sum, item) => sum + (item.value || 0), 0);

          // 处理总数值为0的情况（避免NaN）
          let percent = "0.00%";
          if (total > 0) {
            percent = ((item.value / total) * 100).toFixed(2) + "%";
          }

          // 返回格式化后的文本：名称 + 值 + 百分比
          return `{name|${item.name}} {name1|${item.value}} {per|${percent}}`;
        },
        data: data.map((item) => item.name),
        textStyle: {
          fontSize: 12,
          padding: [0, 8],
          rich: {
            name: {
              // 名称样式（可选）
              color: "rgba(102, 112, 133, 1)",
              fontSize: 12,
              width: 36,
            },
            name1: {
              // 名称样式（可选）
              color: "rgba(102, 112, 133, 1)",
              fontSize: 12,
              padding: [0, 0, 0, 8],
              width: 24,
            },
            per: {
              // value 样式
              color: "rgba(152, 162, 179, 1)", // 橙色强调
              padding: [0, 0, 0, 8], // 内边距
              width: 45,
            },
          },
        },
        icon: "circle", // 设置图例标记为圆形
        itemGap: 8, // 标记和文字之间的间距
        itemWidth: 8, // 标记的宽度
        itemHeight: 8, // 标记的高度
      },
      grid: {
        left: 0, // 左边距
        right: 0, // 右边距
        top: 0, // 上边距
        bottom: 0, // 下边距
        containLabel: false,
      },
      series: [
        {
          name: "数据占比",
          type: "pie",
          radius: ["68%", "88%"], // 修改为环形图
          center: ["24%", "54%"],
          data: data,
          color: ['rgba(60, 195, 223, 1)','rgba(255, 146, 138, 1)','rgba(137, 121, 255, 1)','rgba(205, 160, 80,1)','#ccc'],
          labelLine: {
            show: false, // 完全不显示标签线
          },
          label: {
            show: false,
          },
        },
        {
          type: "pie",
          radius: ["10%", "45%"], // 中心文本区域
          center: ["23.2%", "54%"],
          tooltip: {
            show: false, // 不显示中心区域的tooltip
          },
          label: {
            show: true,
            position: "center",
            formatter: `{title|${totalCount}}\n{text|共计出餐}`,
            rich: {
              title: {
                fontSize: 18,
                fontWeight: "bold",
                color: "rgba(24, 34, 48, 1)",
                fontStyle: "italic",
              },
              text: {
                padding: [4, 0, 0, 4],
                left: 10,
                fontSize: 12,
                fontWeight: 400,
                color: "rgba(102, 112, 133, 1)",
              },
            },
            backgroundColor: "transparent",
          },
          data: [{ value: 1, name: "12" }],
          itemStyle: {
            color: "transparent", // 中心区域透明
          },
          hoverAnimation: false, // 禁用悬停动画
        },
      ],
    };

    chart.setOption(option);

    // 响应窗口大小变化
    const resizeHandler = () => {
      chart.resize();
    };

    window.addEventListener("resize", resizeHandler);

    return () => {
      window.removeEventListener("resize", resizeHandler);
      chart.dispose();
    };
  }, [totalCount,excellentCount,goodCount,passCount,failCount,waitCount]);
  return <div ref={chartRef} style={{ width, height }} />;
};

export default PieChart;
